From 1df7599d5edbf0e86e9c53a753f0313f6edd05dd Mon Sep 17 00:00:00 2001
From: Nikhil Nandagopal <nikhil.nandagopal@gmail.com>
Date: Fri, 7 Aug 2020 11:49:36 +0530
Subject: [PATCH] Fix/tab widget (#233)

* Added information to setup domain

* Fixed incorrect var reference

* Updated documentation message

* Updated env template

* updated template

* removed debug echo

* Updated Script

* Updated Text

* Removed option to connect to external mongo for fresh installs
Exit script of docker desktop is not installed

* Updated docker installation explanation

* added a question to skip custom domain if user is installing locally

* Inverted script question and

* Removed question to determine local installation

* Updated Popup CTA to Modal
Updated query templates to contain bindings
Added a message to display on API / Query errors

* updated styles for evaluated value
updated styles for auto complete

* added spaces to questions

* grouped data tree functions together in autocomplete

* Updated autocomplete styles

* Updated property pane styles to become more dense

* Fixed lightning menu styling

* fixed tests

* Fixed Cypress test

* added property to show / hide tabs

* fixed selected tabs not updating

* fixed cypress tests for tabs

Co-authored-by: Nikhil Nandagopal <nikhil@appsmith.com>
---
 app/client/cypress/fixtures/layoutdsl.json |  3 +-
 app/client/src/widgets/TabsWidget.tsx      | 43 +++++++++++++---------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/app/client/cypress/fixtures/layoutdsl.json b/app/client/cypress/fixtures/layoutdsl.json
index 1e48653e2e..0e02fb999d 100644
--- a/app/client/cypress/fixtures/layoutdsl.json
+++ b/app/client/cypress/fixtures/layoutdsl.json
@@ -139,7 +139,7 @@
                                      "id": "tab2"
                                  }
                              ],
-                             "selectedTab": "Tab 1",
+                             "defaultTab": "Tab 1",
                              "blueprint": {
                                  "view": [
                                      {
@@ -187,6 +187,7 @@
                              "leftColumn": 5,
                              "rightColumn": 13,
                              "topRow": 0,
+                             "shouldShowTabs": true,
                              "bottomRow": 7,
                              "parentId": "xe6a0w50jz",
                              "widgetId": "wuzxcyyjma",
diff --git a/app/client/src/widgets/TabsWidget.tsx b/app/client/src/widgets/TabsWidget.tsx
index 80b97262f3..2a44bddbe8 100644
--- a/app/client/src/widgets/TabsWidget.tsx
+++ b/app/client/src/widgets/TabsWidget.tsx
@@ -6,6 +6,7 @@ import WidgetFactory from "utils/WidgetFactory";
 import { generateReactKey } from "utils/generators";
 import { WidgetPropertyValidationType } from "utils/ValidationFactory";
 import { VALIDATION_TYPES } from "constants/WidgetValidation";
+import _ from "lodash";
 
 class TabsWidget extends BaseWidget<
   TabsWidgetProps<TabContainerWidgetProps>,
@@ -14,7 +15,7 @@ class TabsWidget extends BaseWidget<
   static getPropertyValidationMap(): WidgetPropertyValidationType {
     return {
       tabs: VALIDATION_TYPES.TABS_DATA,
-      selectedTab: VALIDATION_TYPES.SELECTED_TAB,
+      defaultTab: VALIDATION_TYPES.SELECTED_TAB,
     };
   }
 
@@ -22,6 +23,18 @@ class TabsWidget extends BaseWidget<
     this.updateWidgetMetaProperty("selectedTabId", tabId);
   };
 
+  static getDerivedPropertiesMap() {
+    return {
+      selectedTab: `{{_.find(this.tabs, { id: this.selectedTabId }).label}}`,
+    };
+  }
+
+  static getDefaultPropertiesMap(): Record<string, string> {
+    return {
+      selectedTab: "defaultTab",
+    };
+  }
+
   getPageView() {
     return (
       <TabsComponent {...this.props} onTabChange={this.onTabChange}>
@@ -125,27 +138,23 @@ class TabsWidget extends BaseWidget<
         }
       }
     }
-    if (this.props.selectedTab) {
-      if (this.props.selectedTab !== prevProps.selectedTab) {
-        let selectedTabId = "";
-        for (let index = 0; index < this.props.tabs.length; index++) {
-          if (this.props.tabs[index].label === this.props.selectedTab) {
-            selectedTabId = this.props.tabs[index].id;
-          }
-        }
+    if (this.props.defaultTab) {
+      if (this.props.defaultTab !== prevProps.defaultTab) {
+        const selectedTab = _.find(this.props.tabs, {
+          label: this.props.defaultTab,
+        });
+        const selectedTabId = selectedTab ? selectedTab.id : undefined;
         this.updateWidgetMetaProperty("selectedTabId", selectedTabId);
       }
     }
   }
 
   componentDidMount() {
-    if (this.props.selectedTab) {
-      let selectedTabId = "";
-      for (let index = 0; index < this.props.tabs.length; index++) {
-        if (this.props.tabs[index].label === this.props.selectedTab) {
-          selectedTabId = this.props.tabs[index].id;
-        }
-      }
+    if (this.props.defaultTab) {
+      const selectedTab = _.find(this.props.tabs, {
+        label: this.props.defaultTab,
+      });
+      const selectedTabId = selectedTab ? selectedTab.id : undefined;
       this.updateWidgetMetaProperty("selectedTabId", selectedTabId);
     }
   }
@@ -167,7 +176,7 @@ export interface TabsWidgetProps<T extends TabContainerWidgetProps>
   children: T[];
   snapColumns?: number;
   snapRows?: number;
-  selectedTab: string;
+  defaultTab: string;
   selectedTabId: string;
 }