Open all accordion'd content in InlineForm by default, allow arbitrar…

…ily close any number of them (#4178)

cypress/tests/core/blocks/blocks-search.js

@@ -46,7 +46,6 @@ describe('Search Block Tests', () => {
     cy.addNewBlock('search');
 
     // Add search query criteria
-    cy.get('#blockform-fieldset-searchquery').click();
     cy.get('#default-query-0-query .react-select__value-container').click();
     cy.get('#default-query-0-query .react-select__option')
       .contains('Type')
@@ -74,7 +73,6 @@ describe('Search Block Tests', () => {
       .click();
 
     //  Add checkbox facet
-    cy.get('#blockform-fieldset-facets > .title').click();
     cy.get('.add-item-button-wrapper > button').click();
     cy.get('#field-field-1-facets-0 .react-select__value-container').click();
     cy.get('.react-select__option').contains('Type').click();

docs/source/configuration/settings-reference.md

@@ -374,6 +374,9 @@ additionalToolbarComponents
       }}
     </Plug>
     ```
+blockSettingsTabFieldsetsInitialStateOpen
+    A Boolean, `true` by default.
+    The fieldsets in the blocks settings tab start by default as non-collapsed (opened), you can decide to have them collapsed (closed) by default setting this to `false`.
 ```
 
 

news/4178.bugfix

@@ -0,0 +1 @@
+Open all accordion'd content in InlineForm by default, allow arbitrarily close any number of them. @sneridagh

package.json

@@ -301,6 +301,7 @@
     "is-hotkey": "0.2.0",
     "is-url": "1.2.4",
     "jest-file": "1.0.0",
+    "jotai": "2.0.3",
     "jwt-decode": "2.2.0",
     "less": "3.11.1",
     "less-loader": "11.1.0",

packages/coresandbox/src/components/Blocks/TestBlock/Data.jsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { SliderSchema } from './schema';
 import { BlockDataForm } from '@plone/volto/components';
 
 const TestBlockData = (props) => {
-  const { block, data, onChangeBlock } = props;
+  const { block, blocksConfig, data, onChangeBlock } = props;
   const intl = useIntl();
-  const schema = SliderSchema({ ...props, intl });
+  const schema = blocksConfig[data['@type']].blockSchema({ intl });
+
   return (
     <BlockDataForm
       block={block}

packages/coresandbox/src/components/Blocks/TestBlock/schema.js

@@ -157,3 +157,80 @@ export const SliderSchema = (props) => ({
   },
   required: [],
 });
+
+export const multipleFieldsetsSchema = (props) => ({
+  title: props.intl.formatMessage(messages.Slider),
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['html'],
+    },
+    {
+      id: 'second',
+      title: 'second',
+      fields: ['slides'],
+    },
+    {
+      id: 'third',
+      title: 'third',
+      fields: ['fieldAfterObjectList'],
+    },
+    {
+      id: 'fourth',
+      title: 'fourth',
+      fields: ['href', 'firstWithDefault', 'style'],
+    },
+  ],
+  properties: {
+    slides: {
+      widget: 'object_list',
+      title: props.intl.formatMessage(messages.items),
+      schema: itemSchema,
+    },
+    fieldAfterObjectList: {
+      title: 'Field after OL',
+    },
+    href: {
+      title: props.intl.formatMessage(messages.Source),
+      widget: 'object_browser',
+      mode: 'link',
+      selectedItemAttrs: [
+        'Title',
+        'Description',
+        'hasPreviewImage',
+        'headtitle',
+      ],
+      allowExternals: true,
+    },
+    firstWithDefault: {
+      title: 'Field with default',
+      default: 'Some default value',
+    },
+    style: {
+      widget: 'object',
+      schema: {
+        title: 'Style',
+        fieldsets: [
+          {
+            id: 'default',
+            fields: ['color'],
+            title: 'Default',
+          },
+        ],
+        properties: {
+          color: {
+            title: 'Color',
+            default: 'red',
+          },
+        },
+        required: [],
+      },
+    },
+    html: {
+      title: 'HTML',
+      widget: 'richtext',
+    },
+  },
+  required: [],
+});

packages/coresandbox/src/index.js

@@ -3,6 +3,7 @@ import NewsAndEvents from './components/Views/NewsAndEvents';
 import TestBlockView from './components/Blocks/TestBlock/View';
 import TestBlockEdit from './components/Blocks/TestBlock/Edit';
 import { SliderSchema as TestBlockSchema } from './components/Blocks/TestBlock/schema';
+import { multipleFieldsetsSchema } from './components/Blocks/TestBlock/schema';
 import codeSVG from '@plone/volto/icons/code.svg';
 
 const testBlock = {
@@ -12,13 +13,10 @@ const testBlock = {
   group: 'common',
   view: TestBlockView,
   edit: TestBlockEdit,
+  blockSchema: TestBlockSchema,
   restricted: false,
   mostUsed: true,
   sidebarTab: 1,
-  security: {
-    addPermission: [],
-    view: [],
-  },
   variations: [
     {
       id: 'default',
@@ -32,6 +30,19 @@ const testBlock = {
   extensions: {},
 };
 
+const testBlockMultipleFieldsets = {
+  id: 'testBlockMultipleFieldsets',
+  title: 'testBlockMultipleFieldsets',
+  icon: codeSVG,
+  group: 'common',
+  view: TestBlockView,
+  edit: TestBlockEdit,
+  blockSchema: multipleFieldsetsSchema,
+  restricted: false,
+  mostUsed: true,
+  sidebarTab: 1,
+};
+
 const testBlockDefaultEdit = {
   id: 'testBlockDefaultEdit',
   title: 'testBlockDefaultEdit',
@@ -42,10 +53,6 @@ const testBlockDefaultEdit = {
   restricted: false,
   mostUsed: true,
   sidebarTab: 1,
-  security: {
-    addPermission: [],
-    view: [],
-  },
   variations: [
     {
       id: 'default',
@@ -68,10 +75,6 @@ const testBlockDefaultView = {
   restricted: false,
   mostUsed: true,
   sidebarTab: 1,
-  security: {
-    addPermission: [],
-    view: [],
-  },
   variations: [
     {
       id: 'default',
@@ -122,6 +125,7 @@ export const workingCopyFixture = (config) => {
 
 const applyConfig = (config) => {
   config.blocks.blocksConfig.testBlock = testBlock;
+  config.blocks.blocksConfig.testBlockMultipleFieldsets = testBlockMultipleFieldsets;
   config.blocks.blocksConfig.testBlockDefaultEdit = testBlockDefaultEdit;
   config.blocks.blocksConfig.testBlockDefaultView = testBlockDefaultView;
   config.blocks.blocksConfig.listing = listing(config);

src/components/manage/Form/InlineForm.jsx

@@ -4,13 +4,21 @@ import { Accordion, Segment, Message } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import AnimateHeight from 'react-animate-height';
 import { keys, map, isEqual } from 'lodash';
-
+import { useAtom } from 'jotai';
+import { inlineFormFieldsetsState } from './InlineFormState';
+import {
+  insertInArray,
+  removeFromArray,
+  arrayRange,
+} from '@plone/volto/helpers/Utils/Utils';
 import { Field, Icon } from '@plone/volto/components';
 import { applySchemaDefaults } from '@plone/volto/helpers';
 
 import upSVG from '@plone/volto/icons/up-key.svg';
 import downSVG from '@plone/volto/icons/down-key.svg';
 
+import config from '@plone/volto/registry';
+
 const messages = defineMessages({
   editValues: {
     id: 'Edit values',
@@ -70,12 +78,34 @@ const InlineForm = (props) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const [currentActiveFieldset, setCurrentActiveFieldset] = React.useState(0);
+  const [currentActiveFieldset, setCurrentActiveFieldset] = useAtom(
+    inlineFormFieldsetsState({
+      name: block,
+      fielsetList: other,
+      initialState: config.settings.blockSettingsTabFieldsetsInitialStateOpen
+        ? arrayRange(0, other.length - 1, 1)
+        : [],
+    }),
+  );
+
   function handleCurrentActiveFieldset(e, blockProps) {
     const { index } = blockProps;
-    const newIndex = currentActiveFieldset === index ? -1 : index;
-
-    setCurrentActiveFieldset(newIndex);
+    if (currentActiveFieldset.includes(index)) {
+      setCurrentActiveFieldset(
+        removeFromArray(
+          currentActiveFieldset,
+          currentActiveFieldset.indexOf(index),
+        ),
+      );
+    } else {
+      setCurrentActiveFieldset(
+        insertInArray(
+          currentActiveFieldset,
+          index,
+          currentActiveFieldset.length + 1,
+        ),
+      );
+    }
   }
 
   return (
@@ -136,22 +166,22 @@ const InlineForm = (props) => {
         <Accordion fluid styled className="form" key={fieldset.id}>
           <div key={fieldset.id} id={`blockform-fieldset-${fieldset.id}`}>
             <Accordion.Title
-              active={currentActiveFieldset === index}
+              active={currentActiveFieldset.includes(index)}
               index={index}
               onClick={handleCurrentActiveFieldset}
             >
               {fieldset.title && <>{fieldset.title}</>}
-              {currentActiveFieldset === index ? (
+              {currentActiveFieldset.includes(index) ? (
                 <Icon name={upSVG} size="20px" />
               ) : (
                 <Icon name={downSVG} size="20px" />
               )}
             </Accordion.Title>
-            <Accordion.Content active={currentActiveFieldset === index}>
+            <Accordion.Content active={currentActiveFieldset.includes(index)}>
               <AnimateHeight
                 animateOpacity
                 duration={500}
-                height={currentActiveFieldset === index ? 'auto' : 0}
+                height={currentActiveFieldset.includes(index) ? 'auto' : 0}
               >
                 <Segment className="attached">
                   {map(fieldset.fields, (field) => (

src/components/manage/Form/InlineFormState.js

@@ -0,0 +1,8 @@
+import { atom } from 'jotai';
+import { atomFamily } from 'jotai/utils';
+import { isEqual } from 'lodash';
+
+export const inlineFormFieldsetsState = atomFamily(
+  ({ name, initialState }) => atom(initialState),
+  (a, b) => a.name === b.name && isEqual(a.fielsetList, b.fielsetList),
+);

src/config/index.js

@@ -181,6 +181,7 @@ let config = {
     hashLinkSmoothScroll: false,
     styleClassNameExtenders,
     querystringSearchGet: false,
+    blockSettingsTabFieldsetsInitialStateOpen: true,
   },
   experimental: {
     addBlockButton: {

src/helpers/Utils/Utils.js

@@ -299,3 +299,16 @@ export const cloneDeepSchema = (object) => {
     }
   });
 };
+
+/**
+ * Creates an array given a range of numbers
+ * @param {number} start start number from
+ * @param {number} stop stop number at
+ * @param {number} step step every each number in the sequence
+ * @returns {array} The result, eg. [0, 1, 2, 3, 4]
+ */
+export const arrayRange = (start, stop, step) =>
+  Array.from(
+    { length: (stop - start) / step + 1 },
+    (value, index) => start + index * step,
+  );

src/helpers/index.js

@@ -85,6 +85,7 @@ export {
   hasApiExpander,
   replaceItemOfArray,
   cloneDeepSchema,
+  arrayRange,
   reorderArray,
 } from '@plone/volto/helpers/Utils/Utils';
 export { messages } from './MessageLabels/MessageLabels';

test-setup-config.js

@@ -82,6 +82,7 @@ config.set('settings', {
   viewableInBrowserObjects: [],
   styleClassNameConverters,
   styleClassNameExtenders,
+  blockSettingsTabFieldsetsInitialStateOpen: true,
 });
 config.set('blocks', {
   blocksConfig: {

yarn.lock

@@ -2704,6 +2704,7 @@ __metadata:
     jest: 26.6.3
     jest-environment-jsdom: ^26
     jest-file: 1.0.0
+    jotai: 2.0.3
     jsonwebtoken: 9.0.0
     jwt-decode: 2.2.0
     less: 3.11.1
@@ -15038,6 +15039,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jotai@npm:2.0.3":
+  version: 2.0.3
+  resolution: "jotai@npm:2.0.3"
+  peerDependencies:
+    react: ">=17.0.0"
+  peerDependenciesMeta:
+    react:
+      optional: true
+  checksum: 3ad1d6a9b7e40a8dd8cdc423441164c25852a328c98806ed0e2a283a4e07af661f4a88b50528367aeae582932171bc8979e45cbc9023af30b9f4a348faeed567
+  languageName: node
+  linkType: hard
+
 "jquery@npm:x.*":
   version: 3.6.3
   resolution: "jquery@npm:3.6.3"