Feature/greenhouse fix

package.json

@@ -33,7 +33,7 @@
 		"webpack-cli": "^4.10.0"
 	},
 	"dependencies": {
-		"@eightshift/frontend-libs": "^7.0.0",
+		"@eightshift/frontend-libs": "^7.1.0",
 		"autosize": "^5.0.1",
 		"choices.js": "^10.1.0",
 		"dropzone": "^6.0.0-beta.1"

src/AdminMenus/FormGlobalSettingsAdminSubMenu.php

@@ -13,6 +13,7 @@
 use EightshiftFormsVendor\EightshiftLibs\Helpers\Components;
 use EightshiftForms\Helpers\Helper;
 use EightshiftForms\Settings\GlobalSettings\SettingsGlobalInterface;
+use EightshiftForms\Settings\Settings\SettingsAll;
 use EightshiftForms\Settings\Settings\SettingsGeneral;
 use EightshiftFormsVendor\EightshiftLibs\AdminMenus\AbstractAdminSubMenu;
 
@@ -173,13 +174,19 @@ protected function processAttributes($attr): array
 	{
 		$type = isset($_GET['type']) ? \sanitize_text_field(\wp_unslash($_GET['type'])) : SettingsGeneral::SETTINGS_TYPE_KEY; // phpcs:ignore WordPress.Security.NonceVerification.Recommended
 
+		$settingsSidebarOutput = [];
+		foreach ($this->settingsGlobal->getSettingsSidebar($type) as $item) {
+			$sidebarType = $item['type'] ?? SettingsAll::SETTINGS_SIEDBAR_TYPE_GENERAL;
+			$settingsSidebarOutput[$sidebarType][] = $item;
+		}
+
 		return [
 			// translators: %s replaces form title name.
 			'adminSettingsPageTitle' => \esc_html__('Settings', 'eightshift-forms'),
 			'adminSettingsSubTitle' => \esc_html__('These settings apply to all forms.', 'eightshift-forms'),
 			'adminSettingsBackLink' => Helper::getListingPageUrl(),
 			'adminSettingsLink' => Helper::getSettingsGlobalPageUrl(''),
-			'adminSettingsSidebar' => $this->settingsGlobal->getSettingsSidebar($type),
+			'adminSettingsSidebar' => $settingsSidebarOutput,
 			'adminSettingsForm' => $this->settingsGlobal->getSettingsForm($type),
 			'adminSettingsType' => $type,
 			'adminSettingsIsGlobal' => true,

src/AdminMenus/FormSettingsAdminSubMenu.php

@@ -12,6 +12,7 @@
 
 use EightshiftFormsVendor\EightshiftLibs\Helpers\Components;
 use EightshiftForms\Helpers\Helper;
+use EightshiftForms\Settings\Settings\SettingsAll;
 use EightshiftForms\Settings\Settings\SettingsAllInterface;
 use EightshiftForms\Settings\Settings\SettingsGeneral;
 use EightshiftFormsVendor\EightshiftLibs\AdminMenus\AbstractAdminSubMenu;
@@ -186,13 +187,19 @@ protected function processAttributes($attr): array
 			$formTitle = \esc_html__('No form title', 'eightshift-forms');
 		}
 
+		$settingsSidebarOutput = [];
+		foreach ($this->settingsAll->getSettingsSidebar($formId, $type) as $item) {
+			$sidebarType = $item['type'] ?? SettingsAll::SETTINGS_SIEDBAR_TYPE_GENERAL;
+			$settingsSidebarOutput[$sidebarType][] = $item;
+		}
+
 		return [
 			// translators: %s replaces the form name.
 			'adminSettingsPageTitle' => \sprintf(\esc_html__('Form settings: %s', 'eightshift-forms'), $formTitle),
 			'adminSettingsBackLink' => Helper::getListingPageUrl(),
 			'adminSettingsFormEditLink' => Helper::getFormEditPageUrl($formId),
 			'adminSettingsLink' => Helper::getSettingsPageUrl($formId, ''),
-			'adminSettingsSidebar' => $this->settingsAll->getSettingsSidebar($formId, $type),
+			'adminSettingsSidebar' => $settingsSidebarOutput,
 			'adminSettingsForm' => $this->settingsAll->getSettingsForm($formId, $type),
 			'adminSettingsType' => $type,
 		];

src/Blocks/components/admin-settings-section/admin-settings-section-admin.scss

@@ -13,12 +13,26 @@
 
 	&__sidebar {
 		background-color: var(--global-colors-es-white);
+		height: 100vh;
+		overflow-x: hidden;
 
 		> * {
 			margin-bottom: var(--global-es-spacing-horizontal);
+			border-top: 1px solid var(--global-colors-es-ebb);
+
+			&:first-child {
+				border-top: 0;
+			}
 		}
 	}
 
+	&__sidebar-label {
+		padding: 1rem 1.1rem 0.5rem;
+		font-size: 1.1rem;
+		font-weight: bold;
+		line-height: 1.2;
+	}
+
 	&__main {
 		border-left: 1px solid var(--global-colors-es-ebb);
 
@@ -87,7 +101,7 @@
 		}
 
 		&:hover,
-		&:focus, {
+		&:focus {
 			color: var(--global-colors-es-matisse);
 			background-color: var(--global-colors-es-matisse-05);
 		}

src/Blocks/components/admin-settings/admin-settings.php

@@ -13,6 +13,7 @@
 
 echo Components::outputCssVariablesGlobal(); // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped
 
+$componentName = $manifest['componentName'] ?? '';
 $componentClass = $manifest['componentClass'] ?? '';
 $sectionClass = $manifestSection['componentClass'] ?? '';
 
@@ -47,30 +48,19 @@
 			</a>
 		</div>
 
-		<div class="<?php echo esc_attr("{$sectionClass}__section"); ?>">
-			<div class="<?php echo esc_attr("{$sectionClass}__content"); ?>">
-				<ul class="<?php echo esc_attr("{$sectionClass}__menu"); ?>">
-					<?php foreach ($adminSettingsSidebar as $item) { ?>
-						<?php
-						$label = $item['label'] ?? '';
-						$value = $item['value'] ?? '';
-						$icon = $item['icon'] ?? '';
-						?>
-						<li class="<?php echo esc_attr("{$sectionClass}__menu-item"); ?>">
-							<a
-								href="<?php echo esc_url("{$adminSettingsLink}&type={$value}"); ?>"
-								class="<?php echo esc_attr("{$sectionClass}__menu-link " . Components::selector($value === $adminSettingsType, $sectionClass, 'menu-link', 'active')); ?>"
-							>
-								<span class="<?php echo esc_attr("{$sectionClass}__menu-link-wrap"); ?>">
-									<?php echo $icon; // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped ?>
-									<?php echo esc_html($label); ?>
-								</span>
-							</a>
-						</li>
-					<?php } ?>
-				</ul>
-			</div>
-		</div>
+		<?php
+		echo Components::renderPartial( // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped
+			'component',
+			$componentName,
+			'sidebar-section',
+			[
+				'items' => $adminSettingsSidebar,
+				'sectionClass' => $sectionClass,
+				'adminSettingsLink' => $adminSettingsLink,
+				'adminSettingsType' => $adminSettingsType,
+			]
+		);
+		?>
 	</div>
 	<div class="<?php echo esc_attr("{$sectionClass}__main"); ?>">
 		<div class="<?php echo esc_attr("{$sectionClass}__section"); ?>">

src/Blocks/components/admin-settings/partials/sidebar-section.php

@@ -0,0 +1,75 @@
+<?php
+
+/**
+ * Template for admin settings page - sidebar section partial.
+ *
+ * @package EightshiftForms\Blocks.
+ */
+
+use EightshiftForms\Settings\Settings\SettingsAll;
+use EightshiftFormsVendor\EightshiftLibs\Helpers\Components;
+
+$items = $attributes['items'] ?? [];
+
+$output = [];
+
+if (!$items) {
+	return $output;
+}
+
+$sectionClass = $attributes['sectionClass'] ?? '';
+$adminSettingsLink = $attributes['adminSettingsLink'] ?? '';
+$adminSettingsType = $attributes['adminSettingsType'] ?? '';
+
+// Provide order we want on output.
+$sortOrder = SettingsAll::SIDEBAR_SORT_ORDER;
+uksort($items, function ($key1, $key2) use ($sortOrder) {
+	return array_search($key1, $sortOrder, true) <=> array_search($key2, $sortOrder, true);
+});
+
+foreach ($items as $key => $innerItems) {
+	switch ($key) {
+		case SettingsAll::SETTINGS_SIEDBAR_TYPE_INTEGRATION:
+			$sidebarTitle = __('Integrations', 'eightshift-forms');
+			break;
+		case SettingsAll::SETTINGS_SIEDBAR_TYPE_TROUBLESHOOTING:
+			$sidebarTitle = __('Troubleshooting', 'eightshift-forms');
+			break;
+		case SettingsAll::SETTINGS_SIEDBAR_TYPE_DEVELOP:
+			$sidebarTitle = __('Develop Mode', 'eightshift-forms');
+			break;
+		default:
+			$sidebarTitle = __('General', 'eightshift-forms');
+			break;
+	}
+	?>
+
+	<div class="<?php echo esc_attr("{$sectionClass}__section"); ?>">
+		<div class="<?php echo esc_attr("{$sectionClass}__content"); ?>">
+			<div class="<?php echo esc_attr("{$sectionClass}__sidebar-label"); ?>">
+				<?php echo esc_html($sidebarTitle); ?>
+			</div>
+			<ul class="<?php echo esc_attr("{$sectionClass}__menu"); ?>">
+				<?php foreach ($innerItems as $item) { ?>
+					<?php
+					$label = $item['label'] ?? '';
+					$value = $item['value'] ?? '';
+					$icon = $item['icon'] ?? '';
+					?>
+					<li class="<?php echo esc_attr("{$sectionClass}__menu-item"); ?>">
+						<a
+							href="<?php echo esc_url("{$adminSettingsLink}&type={$value}"); ?>"
+							class="<?php echo esc_attr("{$sectionClass}__menu-link " . Components::selector($value === $adminSettingsType, $sectionClass, 'menu-link', 'active')); ?>"
+						>
+							<span class="<?php echo esc_attr("{$sectionClass}__menu-link-wrap"); ?>">
+								<?php echo $icon; // phpcs:ignore Eightshift.Security.ComponentsEscape.OutputNotEscaped ?>
+								<?php echo esc_html($label); ?>
+							</span>
+						</a>
+					</li>
+				<?php } ?>
+			</ul>
+		</div>
+	</div>
+
+<?php }

src/Blocks/components/form/assets-admin/index.js

@@ -4,6 +4,10 @@ import domReady from '@wordpress/dom-ready';
 import manifest from './../manifest.json';
 
 domReady(() => {
+	if (typeof esFormsLocalization === 'undefined') {
+		throw 'Your project is missing the global "esFormsLocalization" variable called from the enqueue script.';
+	}
+
 	const {
 		componentJsClass,
 		componentCacheJsClass,
@@ -17,6 +21,7 @@ domReady(() => {
 				formSelector: selector,
 				formSubmitRestApiUrl: esFormsLocalization.formSettingsSubmitRestApiUrl,
 				formIsAdmin: true,
+				customFormParams: esFormsLocalization.customFormParams,
 			});
 
 			form.init();