elyra-ai#1919 Scroll Alert into view in Common Properties when clicke…

…d on an Alert Link (elyra-ai#1920)

canvas_modules/common-canvas/src/common-properties/components/editor-form/editor-form.jsx

@@ -75,7 +75,7 @@ class EditorForm extends React.Component {
 		this.visibleTearsheet = null;
 		this.defaultOpenTab = props.activeTab;
 		this.alertOpenTab = null;
-
+		this.scrollToAlert = false;
 	}
 
 
@@ -89,6 +89,18 @@ class EditorForm extends React.Component {
 		return true;
 	}
 
+	componentDidUpdate(prevProps) {
+		// Scroll to the selected accordion even when clicked from Alerts tab
+		if (this.scrollToAlert || prevProps.activeTab !== this.props.activeTab) {
+			const activeTabId = this.props.activeTab;
+			const activeTabElement = document.getElementsByClassName(`${activeTabId}`);
+			if (activeTabId && activeTabElement.length > 0) {
+				activeTabElement[0].scrollIntoView({ behavior: "smooth" });
+			}
+			this.scrollToAlert = false;
+		}
+	}
+
 	_getMessageCountForCategory(tab) {
 		if (!this.props.showAlertsTab) {
 			return null;
@@ -138,6 +150,7 @@ class EditorForm extends React.Component {
 		if (this.defaultOpenTab === this.alertOpenTab) {
 			this.defaultOpenTab = null;
 		}
+		this.scrollToAlert = true;
 		this.props.setActiveTab(control.parentCategoryId);
 	}
 
@@ -205,7 +218,7 @@ class EditorForm extends React.Component {
 								open={ this.defaultOpenTab === tab.group || this.alertOpenTab === tab.group }
 								onHeadingClick={this._showCategoryPanel.bind(this, tab.group)}
 								className={`${classNames("properties-category-content",
-									{ "show": categoryOpen })}`}
+									{ "show": categoryOpen }, tab.group)}`}
 							>
 								{panelItems}
 								{additionalComponent}