@eeacms/volto-tabs-block 8.0.0 → 8.1.0

package/CHANGELOG.md

@@ -4,7 +4,30 @@ 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).
 
-### [8.0.0](https://github.com/eea/volto-tabs-block/compare/7.5.1...8.0.0) - 22 April 2024
+### [8.1.0](https://github.com/eea/volto-tabs-block/compare/8.0.1...8.1.0) - 26 August 2024
+
+#### :rocket: New Features
+
+- feat(tabs): hide empty tabs, ref #273963 [Miu Razvan - [`39c0af7`](https://github.com/eea/volto-tabs-block/commit/39c0af75e530f0c21a9a3b2a2a9117002473d3b8)]
+
+#### :house: Internal changes
+
+- chore: package.json [Alin Voinea - [`244a1de`](https://github.com/eea/volto-tabs-block/commit/244a1de20a7e9a8a2282f91715b26990a83454a8)]
+
+#### :hammer_and_wrench: Others
+
+- test isTabEmpty function [Miu Razvan - [`d3e569c`](https://github.com/eea/volto-tabs-block/commit/d3e569c6dcd244b31349616dc97b47566ac053c1)]
+- clean up [Miu Razvan - [`4cf2260`](https://github.com/eea/volto-tabs-block/commit/4cf2260a9bb9e8ed1743ca7f9db4c6c6c6fd710f)]
+- update empty tab logic [Miu Razvan - [`f859684`](https://github.com/eea/volto-tabs-block/commit/f859684cfce0508cf5122ad82af958ad4f035871)]
+- fix [Miu Razvan - [`d532df2`](https://github.com/eea/volto-tabs-block/commit/d532df2ba65603ccc40a6f6c713129a4d84bc58a)]
+- bump version [Miu Razvan - [`93e4894`](https://github.com/eea/volto-tabs-block/commit/93e48949777d970793665edb782705e0d3ac66b1)]
+### [8.0.1](https://github.com/eea/volto-tabs-block/compare/8.0.0...8.0.1) - 6 August 2024
+
+#### :bug: Bug Fixes
+
+- fix: Pass all errors to BlocksForm - refs #269086 [dobri1408 - [`186d795`](https://github.com/eea/volto-tabs-block/commit/186d79542ae089146d1b562024cd059b4fcbf1f2)]
+
+## [8.0.0](https://github.com/eea/volto-tabs-block/compare/7.5.1...8.0.0) - 22 April 2024
 
 #### :rocket: New Features
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -31,6 +31,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@plone/scripts": "*",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "cypress": "13.1.0",
     "dotenv": "^16.3.2",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",

package/src/components/EditBlockWrapper.jsx

@@ -122,9 +122,9 @@ class EditBlockWrapper extends React.Component {
                   basic
                   title="Add block"
                   onClick={() => {
-                    this.setState({
-                      addNewBlockOpened: !this.state.addNewBlockOpened,
-                    });
+                    this.setState((prevState) => ({
+                      addNewBlockOpened: !prevState.addNewBlockOpened,
+                    }));
                   }}
                   className="column-block-add-button"
                 >

package/src/components/View.jsx

@@ -4,7 +4,10 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
+import {
+  isTabEmpty,
+  getParentTabFromHash,
+} from '@eeacms/volto-tabs-block/helpers';
 import { DefaultView } from './templates/default';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
@@ -19,8 +22,10 @@ const View = (props) => {
   const metadata = props.metadata || props.properties;
   const template = data.variation || 'default';
   const tabsData = data.data || {};
-  const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
+  const tabsList = (tabsData.blocks_layout?.items || []).filter((tab) => {
+    return data.hideEmptyTabs ? !isTabEmpty(tabs[tab]) : true;
+  });
   const [activeTab, setActiveTab] = React.useState(tabsList?.[0]);
   const activeTabIndex = tabsList.indexOf(activeTab);
   const tabData = tabs[activeTab] || {};

package/src/components/schema.js

@@ -86,6 +86,10 @@ const messages = defineMessages({
     id: 'hideTitle',
     defaultMessage: 'Hide tab title?',
   },
+  HideEmptyTabs: {
+    id: 'hideEmptyTabs',
+    defaultMessage: 'Hide empty tabs in view?',
+  },
   Large: {
     id: 'large',
     defaultMessage: 'Large',
@@ -191,7 +195,13 @@ export const blockSchema = (props) => {
       {
         id: 'default',
         title: intl.formatMessage(messages.Default),
-        fields: ['title', 'description', 'verticalAlign', 'data'],
+        fields: [
+          'title',
+          'description',
+          'verticalAlign',
+          'hideEmptyTabs',
+          'data',
+        ],
       },
     ],
     properties: {
@@ -216,6 +226,10 @@ export const blockSchema = (props) => {
         ],
         default: 'flex-start',
       },
+      hideEmptyTabs: {
+        title: intl.formatMessage(messages.HideEmptyTabs),
+        type: 'boolean',
+      },
     },
     required: [],
   };

package/src/components/templates/default/Edit.jsx

@@ -244,6 +244,7 @@ const Edit = (props) => {
         return (
           <Tab.Pane as={isContainer ? Container : undefined}>
             <BlocksForm
+              errors={props.errors}
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}

package/src/components/templates/horizontal-responsive/Edit.jsx

@@ -347,6 +347,7 @@ const Edit = (props) => {
         <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
           <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
             <BlocksForm
+              errors={props.errors}
               allowedBlocks={data?.allowedBlocks}
               description={data?.instructions?.data}
               manage={manage}

package/src/helpers.js

@@ -1,5 +1,10 @@
 import { v4 as uuid } from 'uuid';
-import { emptyBlocksForm, applySchemaDefaults } from '@plone/volto/helpers';
+import {
+  emptyBlocksForm,
+  applySchemaDefaults,
+  getBlocksFieldname,
+  getBlocksLayoutFieldname,
+} from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
 
 export const empty = ({ schema, intl }) => {
@@ -56,3 +61,22 @@ export const getParentTabFromHash = (tabsBlockData, urlHash) => {
   }
   return null;
 };
+
+export const isTabEmpty = (content) => {
+  const blocks_field = getBlocksFieldname(content);
+  const blocks_layout_field = getBlocksLayoutFieldname(content);
+  const blocks = content[blocks_field] || {};
+  const blocksNo = content[blocks_layout_field]?.items?.length || 0;
+
+  if (blocksNo === 1) {
+    const blockId = content[blocks_layout_field].items[0];
+    const block = blocks[blockId];
+    if (block['@type'] === 'slate' && !block['plaintext']) {
+      return true;
+    }
+  }
+  if (blocksNo === 0) {
+    return true;
+  }
+  return false;
+};

package/src/helpers.test.js

@@ -3,6 +3,7 @@ import {
   emptyTab,
   scrollToTarget,
   getParentTabFromHash,
+  isTabEmpty,
 } from './helpers';
 // import { emptyBlocksForm } from '@plone/volto/helpers';
 import { visitBlocks, toSlug } from '@eeacms/volto-anchors/helpers';
@@ -42,6 +43,19 @@ describe('emptyTab function', () => {
   });
 });
 
+describe('isTabEmpty function', () => {
+  it('returns if a tab is empty', () => {
+    // emptyBlocksForm.mockReturnValue({});
+    const result = isTabEmpty({
+      blocks: {},
+      blocks_layout: {
+        items: [],
+      },
+    });
+    expect(result).toEqual(true);
+  });
+});
+
 describe('scrollToTarget', () => {
   it('should call window.scrollTo with the correct arguments', () => {
     window.scrollTo = jest.fn();