Allow user add lists

[MAILPOET-2452]

assets/js/src/form_editor/blocks/segment_select/edit.jsx

@@ -4,12 +4,40 @@ import {
   PanelBody,
   TextControl,
   CheckboxControl,
+  SelectControl,
+  BaseControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
 const SegmentSelectEdit = ({ attributes, setAttributes }) => {
+  const allSegments = useSelect(
+    (select) => select('mailpoet-form-editor').getAllAvailableSegments(),
+    []
+  );
+
+  const segmentsListToBeAdded = allSegments.map((segment) => ({
+    label: segment.name,
+    value: segment.id,
+  }))
+    .filter((segment) => !attributes.values.find((s) => s.id === segment.value));
+
+  const addSegment = (segmentId) => {
+    const segment = allSegments.find((s) => s.id === segmentId);
+    setAttributes({
+      values: [
+        ...attributes.values,
+        {
+          name: segment.name,
+          isChecked: false,
+          id: segmentId,
+        },
+      ],
+    });
+  };
+
   const inspectorControls = (
     <InspectorControls>
       <Panel>
@@ -20,6 +48,19 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
             data-automation-id="settings_first_name_label_input"
             onChange={(label) => (setAttributes({ label }))}
           />
+          {segmentsListToBeAdded.length ? (
+            <SelectControl
+              label={`${MailPoet.I18n.t('blockSegmentSelectListLabel')}:`}
+              options={[
+                {
+                  label: MailPoet.I18n.t('settingsPleaseSelectList'),
+                  value: null,
+                },
+                ...segmentsListToBeAdded,
+              ]}
+              onChange={addSegment}
+            />
+          ) : null}
         </PanelBody>
       </Panel>
     </InspectorControls>
@@ -42,9 +83,9 @@ const SegmentSelectEdit = ({ attributes, setAttributes }) => {
   return (
     <>
       {inspectorControls}
-      <p>
-        {attributes.label}
-      </p>
+      <BaseControl
+        label={attributes.label}
+      />
       {renderValues()}
     </>
   );