Add poweruser menu review (#238)

* New features on table block (#235) * New features on table block * Add 2 new boolean options to table configuration: 'Show headers' and 'Make the table sortable' * Add text align option to table configuration * Clean up * Update tests * Add 'Vertical align' option * Update tests * [JENKINS] - Fix tests to work with Volto 15 * Bump version to 5.4.0 * set showHeaders as true by default * Replace showHeaders with hideHeaders * use align widget * Update tests * fix(table style): change display to inline-block for headers content * Add comment to public.less Co-authored-by: Alin Voinea <contact@avoinea.com> * Automated release 5.4.0 * Add Sonarqube tag using clms-frontend addons list * chore(cypress): Fix paste html * Automated release 5.4.1 * Allow passing custom slate settings * WIP * WIP * Seems to be working * Properly select first option in menu * Add some instructions on slash menu * Try to cancel Esc * Add node about esc canceling * Add one more note * Return from component Co-authored-by: Alin Voinea <contact@avoinea.com> Co-authored-by: Miu Razvan <miu.razvan28@gmail.com> Co-authored-by: EEA Jenkins <@users.noreply.github.com> Co-authored-by: EEA Jenkins <eea-jenkins@users.noreply.github.com>
eea · Apr 3, 2022 · a377f1e · a377f1e
1 parent 43e3ffc
commit a377f1e
Show file tree

Hide file tree

Showing 19 changed files with 494 additions and 157 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,8 +4,22 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [5.4.1](https://github.com/eea/volto-slate/compare/5.4.0...5.4.1)
+
+- chore(cypress): Fix paste html [`0bebd22`](https://github.com/eea/volto-slate/commit/0bebd222609ad8186d12be93c230ac1bc1b3c16d)
+
+#### [5.4.0](https://github.com/eea/volto-slate/compare/5.3.5...5.4.0)
+
+> 15 March 2022
+
+- New features on table block (#235) [`#236`](https://github.com/eea/volto-slate/pull/236)
+- New features on table block [`#235`](https://github.com/eea/volto-slate/pull/235)
+
 #### [5.3.5](https://github.com/eea/volto-slate/compare/5.3.4...5.3.5)
 
+> 8 March 2022
+
+- Develop [`#232`](https://github.com/eea/volto-slate/pull/232)
 - Do not override the whole Title block, but only the view/edit components.  [`#231`](https://github.com/eea/volto-slate/pull/231)
 - Do not override the whole Title block, but only the view/edit components.  (#231) [`#230`](https://github.com/eea/volto-slate/issues/230)
 

diff --git a/Jenkinsfile b/Jenkinsfile
@@ -5,7 +5,7 @@ pipeline {
         GIT_NAME = "volto-slate"
         NAMESPACE = ""
         DEPENDENCIES = "volto-slate:asCypressDefault"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,www.eea.europa.eu-ims,sustainability.eionet.europa.eu,clms.land.copernicus.eu,industry.eea.europa.eu,water.europa.eu-freshwater,demo-www.eea.europa.eu,clmsdemo.devel6cph.eea.europa.eu"
     }
 
   stages {

diff --git a/cypress/integration/27-block-slate-paste-html.js b/cypress/integration/27-block-slate-paste-html.js
@@ -31,11 +31,11 @@ describe('Block Tests: external text containing html contents/tags ', () => {
     // Save
     cy.toolbarSave();
 
-    cy.get('[id="page-document"] > p:nth-child(3)')
+    cy.get('[id="page-document"] > p:nth-of-type(2)')
       .children()
       .its('length')
       .should('be.gte', 1);
-    cy.get('[id="page-document"] > p:nth-child(4)')
+    cy.get('[id="page-document"] > p:nth-of-type(3)')
       .children()
       .should('have.length', 0);
   });

diff --git a/jest-addon.config.js b/jest-addon.config.js
@@ -9,6 +9,7 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
     'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "volto-slate",
-  "version": "5.3.5",
+  "version": "5.4.1",
   "description": "Slate.js integration with Volto",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

diff --git a/src/blocks/Table/TableBlockEdit.jsx b/src/blocks/Table/TableBlockEdit.jsx
@@ -64,6 +64,7 @@ const emptyRow = (cells) => ({
  * relevance only in the context in which it is used.
  */
 const initialTable = {
+  hideHeaders: false,
   fixed: true,
   compact: false,
   basic: false,
@@ -129,6 +130,18 @@ const messages = defineMessages({
     id: 'Delete col',
     defaultMessage: 'Delete col',
   },
+  hideHeaders: {
+    id: 'Hide headers',
+    defaultMessage: 'Hide headers',
+  },
+  sortable: {
+    id: 'Make the table sortable',
+    defaultMessage: 'Make the table sortable',
+  },
+  sortableDescription: {
+    id: 'Visible only in view mode',
+    defaultMessage: 'Visible only in view mode',
+  },
   fixed: {
     id: 'Fixed width table cells',
     defaultMessage: 'Fixed width table cells',
@@ -153,6 +166,38 @@ const messages = defineMessages({
     id: 'Stripe alternate rows with color',
     defaultMessage: 'Stripe alternate rows with color',
   },
+  textAlign: {
+    id: 'Align text',
+    defaultMessage: 'Align text',
+  },
+  verticalAlign: {
+    id: 'Vertical align',
+    defaultMessage: 'Vertical align',
+  },
+  left: {
+    id: 'Left',
+    defaultMessage: 'Left',
+  },
+  center: {
+    id: 'Center',
+    defaultMessage: 'Center',
+  },
+  right: {
+    id: 'Right',
+    defaultMessage: 'Right',
+  },
+  bottom: {
+    id: 'Bottom',
+    defaultMessage: 'Bottom',
+  },
+  middle: {
+    id: 'Middle',
+    defaultMessage: 'Middle',
+  },
+  top: {
+    id: 'Top',
+    defaultMessage: 'Top',
+  },
 });
 
 /**
@@ -200,12 +245,15 @@ class Edit extends Component {
   constructor(props) {
     super(props);
     this.state = {
+      headers: [],
+      rows: {},
       selected: {
         row: 0,
         cell: 0,
       },
       isClient: false,
     };
+    this.onChange = this.onChange.bind(this);
     this.onSelectCell = this.onSelectCell.bind(this);
     this.onInsertRowBefore = this.onInsertRowBefore.bind(this);
     this.onInsertRowAfter = this.onInsertRowAfter.bind(this);
@@ -216,6 +264,8 @@ class Edit extends Component {
     this.onChangeCell = this.onChangeCell.bind(this);
     this.toggleCellType = this.toggleCellType.bind(this);
     this.toggleBool = this.toggleBool.bind(this);
+    this.toggleHideHeaders = this.toggleHideHeaders.bind(this);
+    this.toggleSortable = this.toggleSortable.bind(this);
     this.toggleFixed = this.toggleFixed.bind(this);
     this.toggleCompact = this.toggleCompact.bind(this);
     this.toggleBasic = this.toggleBasic.bind(this);
@@ -254,6 +304,24 @@ class Edit extends Component {
     }
   }
 
+  /**
+   * On change
+   * @method onChange
+   * @param {string} id Id of modified property.
+   * @param {any} value New value of modified property.
+   * @returns {undefined}
+   */
+  onChange(id, value) {
+    const table = this.props.data.table;
+    this.props.onChangeBlock(this.props.block, {
+      ...this.props.data,
+      table: {
+        ...table,
+        [id]: value,
+      },
+    });
+  }
+
   /**
    * Select cell handler
    * @method onSelectCell
@@ -476,6 +544,24 @@ class Edit extends Component {
     });
   }
 
+  /**
+   * Toggle fixed
+   * @method toggleHideHeaders
+   * @returns {undefined}
+   */
+  toggleHideHeaders() {
+    this.toggleBool('hideHeaders');
+  }
+
+  /**
+   * Toggle sortable
+   * @method toggleSortable
+   * @returns {undefined}
+   */
+  toggleSortable() {
+    this.toggleBool('sortable');
+  }
+
   /**
    * Toggle fixed
    * @method toggleFixed
@@ -542,6 +628,10 @@ class Edit extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
+    const headers = this.props.data.table?.rows?.[0]?.cells || [];
+    const rows =
+      this.props.data.table?.rows?.filter((_, index) => index > 0) || [];
+
     return (
       // TODO: use slate-table instead of table, but first copy the CSS styles
       // to the new name
@@ -642,17 +732,54 @@ class Edit extends Component {
             striped={this.props.data.table.striped}
             className="slate-table-block"
           >
+            {!this.props.data.table.hideHeaders ? (
+              <Table.Header>
+                <Table.Row textAlign="center">
+                  {headers.map((cell, cellIndex) => (
+                    <Table.HeaderCell
+                      key={cell.key}
+                      textAlign="center"
+                      verticalAlign="middle"
+                    >
+                      <Cell
+                        value={cell.value}
+                        row={0}
+                        cell={cellIndex}
+                        onSelectCell={this.onSelectCell}
+                        selected={
+                          this.props.selected &&
+                          this.state.selected &&
+                          0 === this.state.selected.row &&
+                          cellIndex === this.state.selected.cell
+                        }
+                        selectedCell={this.state.selected}
+                        isTableBlockSelected={this.props.selected}
+                        onAddBlock={this.props.onAddBlock}
+                        onSelectBlock={this.props.onSelectBlock}
+                        onChange={this.onChangeCell}
+                        index={this.props.index}
+                      />
+                    </Table.HeaderCell>
+                  ))}
+                </Table.Row>
+              </Table.Header>
+            ) : (
+              ''
+            )}
             <Table.Body>
-              {map(this.props.data.table.rows, (row, rowIndex) => (
+              {map(rows, (row, rowIndex) => (
                 <Table.Row key={row.key}>
                   {map(row.cells, (cell, cellIndex) => (
                     <Table.Cell
                       key={cell.key}
-                      as={cell.type === 'header' ? 'th' : 'td'}
+                      textAlign={this.props.data.table.textAlign || 'center'}
+                      verticalAlign={
+                        this.props.data.table.verticalAlign || 'middle'
+                      }
                       className={
                         this.props.selected &&
                         this.state.selected &&
-                        rowIndex === this.state.selected.row &&
+                        rowIndex + 1 === this.state.selected.row &&
                         cellIndex === this.state.selected.cell &&
                         this.props.selected
                           ? 'selected'
@@ -661,13 +788,13 @@ class Edit extends Component {
                     >
                       <Cell
                         value={cell.value}
-                        row={rowIndex}
+                        row={rowIndex + 1}
                         cell={cellIndex}
                         onSelectCell={this.onSelectCell}
                         selected={
                           this.props.selected &&
                           this.state.selected &&
-                          rowIndex === this.state.selected.row &&
+                          rowIndex + 1 === this.state.selected.row &&
                           cellIndex === this.state.selected.cell
                         }
                         selectedCell={this.state.selected}
@@ -691,6 +818,27 @@ class Edit extends Component {
                 <FormattedMessage id="Table" defaultMessage="Table" />
               </Segment>
               <Segment attached>
+                <Field
+                  id="hideHeaders"
+                  title={this.props.intl.formatMessage(messages.hideHeaders)}
+                  type="boolean"
+                  value={
+                    this.props.data.table && this.props.data.table.hideHeaders
+                  }
+                  onChange={() => this.toggleHideHeaders()}
+                />
+                <Field
+                  id="sortable"
+                  title={this.props.intl.formatMessage(messages.sortable)}
+                  description={this.props.intl.formatMessage(
+                    messages.sortableDescription,
+                  )}
+                  type="boolean"
+                  value={
+                    this.props.data.table && this.props.data.table.sortable
+                  }
+                  onChange={() => this.toggleSortable()}
+                />
                 <Field
                   id="fixed"
                   title={this.props.intl.formatMessage(messages.fixed)}
@@ -735,22 +883,27 @@ class Edit extends Component {
                   }
                   onChange={this.toggleInverted}
                 />
-              </Segment>
-              <Segment secondary attached>
-                <FormattedMessage id="Cell" defaultMessage="Cell" />
-              </Segment>
-              <Segment attached>
                 <Field
-                  id="celltype"
-                  title="Header cell"
-                  type="boolean"
+                  id="textAlign"
+                  title={this.props.intl.formatMessage(messages.textAlign)}
+                  widget="align"
+                  value={
+                    this.props.data.table && this.props.data.table.textAlign
+                  }
+                  onChange={this.onChange}
+                />
+                <Field
+                  id="verticalAlign"
+                  title={this.props.intl.formatMessage(messages.verticalAlign)}
+                  choices={[
+                    ['bottom', this.props.intl.formatMessage(messages.bottom)],
+                    ['middle', this.props.intl.formatMessage(messages.middle)],
+                    ['top', this.props.intl.formatMessage(messages.top)],
+                  ]}
                   value={
-                    this.props.data.table &&
-                    this.props.data.table.rows[this.state.selected.row].cells[
-                      this.state.selected.cell
-                    ].type === 'header'
+                    this.props.data.table && this.props.data.table.verticalAlign
                   }
-                  onChange={this.toggleCellType}
+                  onChange={this.onChange}
                 />
               </Segment>
             </Form>