From e8ed2400078156ab59ed89f99a7463036219de0c Mon Sep 17 00:00:00 2001
From: lstoyanov <lstoyanov@htmlbox.net>
Date: Fri, 7 Feb 2020 16:17:14 +0200
Subject: [PATCH] Add container tabs deeplinking

---
 core/Container/Container.php                  |  4 ++++
 .../metaboxes/components/container/index.js   | 23 ++++++++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/core/Container/Container.php b/core/Container/Container.php
index d06880f0c..a5d1244b2 100644
--- a/core/Container/Container.php
+++ b/core/Container/Container.php
@@ -801,6 +801,10 @@ public function to_json( $load ) {
 			$container_data['fields'][] = $field_data;
 		}
 
+		if ( isset( $_GET['cftab'] ) ) {
+			$container_data['settings']['current_tab'] = sanitize_text_field( $_GET['cftab'] );
+		}
+
 		return $container_data;
 	}
 
diff --git a/packages/metaboxes/components/container/index.js b/packages/metaboxes/components/container/index.js
index d5d7d348a..86fbbf0f1 100644
--- a/packages/metaboxes/components/container/index.js
+++ b/packages/metaboxes/components/container/index.js
@@ -40,12 +40,27 @@ class Container extends Component {
 		const { container } = this.props;
 
 		if ( this.isTabbed( container ) ) {
-			this.setState( {
-				currentTab: Object.keys( container.settings.tabs )[ 0 ]
-			} );
+			const tabNames = Object.keys( container.settings.tabs );
+			const currentTab = tabNames.includes( container.settings.current_tab ) ? container.settings.current_tab : tabNames[ 0 ];
+
+			this.setState( { currentTab } );
 		}
 	}
 
+	/**
+	 * Adds "cftab" query parameter to the current url.
+	 *
+	 * @param {string} tabName
+	 * @return {void}
+	 */
+	addTabNameToUrl( tabName ) {
+		const url = new URL( window.location.href );
+
+		url.searchParams.set( 'cftab', tabName );
+
+		history.pushState( {}, '', url.href );
+	}
+
 	/**
 	 * Returns whether the container uses tabs.
 	 *
@@ -83,6 +98,8 @@ class Container extends Component {
 	 * @return {void}
 	 */
 	handleTabClick = ( tab ) => {
+		this.addTabNameToUrl( tab );
+
 		this.setState( {
 			currentTab: tab
 		} );