From 958a38bd636c89dc64716784785cb853ec39c7cf Mon Sep 17 00:00:00 2001
From: akash-codemonk <67054171+akash-codemonk@users.noreply.github.com>
Date: Sat, 29 Oct 2022 11:31:25 +0530
Subject: [PATCH] fix: video widget not visible in widget pane when explorer is
 pinned (#17318)

---
 .../ExplorerTests/Entity_Explorer_Pin_spec.js    | 16 ++++++++++++++++
 .../ApiTests/API_Response_View_spec.js           |  9 ++++++---
 app/client/cypress/locators/WidgetLocators.ts    |  1 +
 .../cypress/support/Objects/CommonLocators.ts    |  1 +
 .../src/components/editorComponents/Sidebar.tsx  |  2 +-
 app/client/src/pages/Editor/WidgetSidebar.tsx    |  5 ++++-
 6 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Pin_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Pin_spec.js
index 208fbb9542..27e6a6db73 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Pin_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/ExplorerTests/Entity_Explorer_Pin_spec.js
@@ -1,4 +1,10 @@
 const dsl = require("../../../../fixtures/displayWidgetDsl.json");
+import { WIDGET } from "../../../../locators/WidgetLocators";
+import { ObjectsRegistry } from "../../../../support/Objects/Registry";
+
+const ee = ObjectsRegistry.EntityExplorer,
+  agHelper = ObjectsRegistry.AggregateHelper,
+  locator = ObjectsRegistry.CommonLocators;
 
 describe("Entity explorer tests related to pinning and unpinning", function() {
   before(() => {
@@ -19,4 +25,14 @@ describe("Entity explorer tests related to pinning and unpinning", function() {
     cy.get(".t--pin-entity-explorer").click();
     cy.get(".t--entity-explorer").should("be.visible");
   });
+
+  it("Widgets visibility in widget pane", function() {
+    ee.NavigateToSwitcher("widgets");
+    agHelper.ScrollTo(locator._widgetPane, "bottom");
+    agHelper.AssertElementVisible(ee.locator._widgetPageIcon(WIDGET.VIDEO));
+    ee.PinUnpinEntityExplorer(true);
+    agHelper.AssertElementVisible(ee.locator._widgetPageIcon(WIDGET.VIDEO));
+    ee.PinUnpinEntityExplorer(false);
+    ee.NavigateToSwitcher("explorer");
+  });
 });
diff --git a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js
index 957330d287..1710132ec6 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js
+++ b/app/client/cypress/integration/Smoke_TestSuite/ServerSideTests/ApiTests/API_Response_View_spec.js
@@ -13,7 +13,7 @@ describe("Bug 14666: Api Response Test Functionality ", function() {
     apiPage.CreateAndFillApi(testUrl1, "TableTestAPI");
     agHelper.AssertAutoSave();
     apiPage.RunAPI();
-    cy.get(apiEditor.tableResponseTab).should('exist');
+    cy.get(apiEditor.tableResponseTab).should("exist");
     cy.DeleteAPI();
   });
 
@@ -21,10 +21,13 @@ describe("Bug 14666: Api Response Test Functionality ", function() {
     cy.log("Login Successful");
     cy.NavigateToAPI_Panel();
     cy.log("Navigation to API Panel screen successful");
-    apiPage.CreateAndFillApi(testdata.baseUrl + testdata.methods, "TableTestAPI");
+    apiPage.CreateAndFillApi(
+      testdata.baseUrl + testdata.methods,
+      "TableTestAPI",
+    );
     agHelper.AssertAutoSave();
     apiPage.RunAPI();
-    cy.get(apiEditor.tableResponseTab).should('not.exist');
+    cy.get(apiEditor.tableResponseTab).should("not.exist");
     cy.DeleteAPI();
   });
 });
diff --git a/app/client/cypress/locators/WidgetLocators.ts b/app/client/cypress/locators/WidgetLocators.ts
index 73dbf11c4d..6db0c9e5bf 100644
--- a/app/client/cypress/locators/WidgetLocators.ts
+++ b/app/client/cypress/locators/WidgetLocators.ts
@@ -26,6 +26,7 @@ export const WIDGET = {
   CAMERA: "camerawidget",
   FILEPICKER: "filepickerwidgetv2",
   DOCUMENT_VIEWER: "documentviewerwidget",
+  VIDEO: "videowidget",
   CATEGORY_SLIDER: "categorysliderwidget",
   NUMBER_SLIDER: "numbersliderwidget",
   RANGE_SLIDER: "rangesliderwidget",
diff --git a/app/client/cypress/support/Objects/CommonLocators.ts b/app/client/cypress/support/Objects/CommonLocators.ts
index a1fa7a6b87..382d876d07 100644
--- a/app/client/cypress/support/Objects/CommonLocators.ts
+++ b/app/client/cypress/support/Objects/CommonLocators.ts
@@ -149,6 +149,7 @@ export class CommonLocators {
   _deployedPage = `.t--page-switch-tab`;
   _hints = "ul.CodeMirror-hints li";
   _cancelActionExecution = ".t--cancel-action-button";
+  _widgetPane = "[data-cy='widget-sidebar-scrollable-wrapper']";
   _sliderThumb = '[data-cy="slider-thumb"]';
   _bottomPaneCollapseIcon = ".t--tabs-collapse-icon";
   _dropDownMultiTreeValue = (dropdownOption: string) =>
diff --git a/app/client/src/components/editorComponents/Sidebar.tsx b/app/client/src/components/editorComponents/Sidebar.tsx
index 44ebad7ae9..99f878391d 100644
--- a/app/client/src/components/editorComponents/Sidebar.tsx
+++ b/app/client/src/components/editorComponents/Sidebar.tsx
@@ -147,7 +147,7 @@ export const EntityExplorerSidebar = memo((props: Props) => {
   return (
     <div
       className={classNames({
-        [`js-entity-explorer t--entity-explorer transform transition-all flex h-full duration-400 border-r border-gray-200 ${tailwindLayers.entityExplorer}`]: true,
+        [`js-entity-explorer t--entity-explorer transform transition-all flex h-[inherit] duration-400 border-r border-gray-200 ${tailwindLayers.entityExplorer}`]: true,
         relative: pinned && !isPreviewMode,
         "-translate-x-full": (!pinned && !active) || isPreviewMode,
         "shadow-xl": !pinned,
diff --git a/app/client/src/pages/Editor/WidgetSidebar.tsx b/app/client/src/pages/Editor/WidgetSidebar.tsx
index addf996c56..175dd56374 100644
--- a/app/client/src/pages/Editor/WidgetSidebar.tsx
+++ b/app/client/src/pages/Editor/WidgetSidebar.tsx
@@ -77,7 +77,10 @@ function WidgetSidebar({ isActive }: { isActive: boolean }) {
         placeholder="Search widgets..."
         ref={searchInputRef}
       />
-      <div className="flex-grow px-3 overflow-y-scroll">
+      <div
+        className="flex-grow px-3 overflow-y-scroll"
+        data-cy="widget-sidebar-scrollable-wrapper"
+      >
         <p className="px-3 py-3 text-sm leading-relaxed text-trueGray-400 t--widget-sidebar">
           {createMessage(WIDGET_SIDEBAR_CAPTION)}
         </p>