From d96c4981ca214e7e3b9209901ad1edae00a97ea0 Mon Sep 17 00:00:00 2001
From: Pawan Kumar <pawan.stardust@gmail.com>
Date: Wed, 24 Nov 2021 17:55:07 +0530
Subject: [PATCH] fix: Button size inside the Table widget has increased +
 Property pane's panel not scrollable + Alignment issues (#9318)

---
 .../comments/CommentThread/CommentThread.tsx  |  2 +-
 .../components/editorComponents/Button.tsx    |  4 ---
 .../GlobalSearch/SnippetRefinements.tsx       |  2 ++
 .../GlobalSearch/SnippetsFilter.tsx           | 13 +++++++---
 .../editorComponents/JSResponseView.tsx       |  4 +--
 app/client/src/pages/Applications/index.tsx   | 26 +++++++++----------
 .../components/DataSourceOption.tsx           |  2 +-
 .../GeneratePageForm/GeneratePageForm.tsx     | 25 +++++++++++-------
 .../PropertyPane/PanelPropertiesEditor.tsx    |  4 +--
 .../src/pages/common/CanvasSelectionArena.tsx |  5 +++-
 app/client/src/pages/common/PageNotFound.tsx  |  6 ++---
 .../widgets/IframeWidget/component/index.tsx  | 22 +++++++---------
 12 files changed, 61 insertions(+), 54 deletions(-)

diff --git a/app/client/src/comments/CommentThread/CommentThread.tsx b/app/client/src/comments/CommentThread/CommentThread.tsx
index 75ea2fdbb7..d99dc697dc 100644
--- a/app/client/src/comments/CommentThread/CommentThread.tsx
+++ b/app/client/src/comments/CommentThread/CommentThread.tsx
@@ -42,7 +42,7 @@ const ThreadContainer = styled(animated.div).withConfig({
   pinned?: boolean;
   maxHeight: string;
 }>`
-  width: 100%;
+  width: ${(props) => (props.inline ? "280px" : "100%")};
   max-width: 100%;
   background-color: ${(props) =>
     props.inline
diff --git a/app/client/src/components/editorComponents/Button.tsx b/app/client/src/components/editorComponents/Button.tsx
index 1aea692683..cd28854156 100644
--- a/app/client/src/components/editorComponents/Button.tsx
+++ b/app/client/src/components/editorComponents/Button.tsx
@@ -26,10 +26,6 @@ const outline = css`
 const buttonStyles = css<Partial<ButtonProps>>`
   ${BlueprintButtonIntentsCSS}
   &&&& {
-    padding: ${(props) =>
-      props.filled || props.outline
-        ? props.theme.spaces[2] + "px " + props.theme.spaces[3] + "px"
-        : 0};
     border-radius: 0;
     background: ${(props) =>
       props.filled || props.outline ? "inherit" : "transparent"};
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SnippetRefinements.tsx b/app/client/src/components/editorComponents/GlobalSearch/SnippetRefinements.tsx
index 43b1b5a06c..ee2b7ab85f 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SnippetRefinements.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SnippetRefinements.tsx
@@ -19,6 +19,8 @@ const RefinementListContainer = styled.div`
     justify-content: flex-start;
     flex-wrap: wrap;
     .refinement-pill {
+      display: flex;
+      align-items: center;
       margin: 2px 5px 0;
       padding: 5px;
       color: ${(props) => props.theme.colors.globalSearch.primaryTextColor};
diff --git a/app/client/src/components/editorComponents/GlobalSearch/SnippetsFilter.tsx b/app/client/src/components/editorComponents/GlobalSearch/SnippetsFilter.tsx
index 359df04300..287749bb38 100644
--- a/app/client/src/components/editorComponents/GlobalSearch/SnippetsFilter.tsx
+++ b/app/client/src/components/editorComponents/GlobalSearch/SnippetsFilter.tsx
@@ -160,14 +160,19 @@ function SnippetsFilter({ refinements, snippetsEmpty }: any) {
       showFilter={showSnippetFilter}
       snippetsEmpty={snippetsEmpty}
     >
-      <button onClick={() => toggleSnippetFilter(!showSnippetFilter)}>
+      <button
+        className="flex items-center justify-center space-x-1"
+        onClick={() => toggleSnippetFilter(!showSnippetFilter)}
+      >
         {!showSnippetFilter && <FilterIcon />}
+
         {!showSnippetFilter &&
           refinements.entities &&
           refinements.entities &&
-          refinements.entities.length > 0 &&
-          ` ${refinements.entities.length}`}
-        {!showSnippetFilter && " Filter"}
+          refinements.entities.length > 0 && (
+            <span>{refinements.entities.length}</span>
+          )}
+        {!showSnippetFilter && <span> Filter</span>}
         {showSnippetFilter && <CloseFilterIcon />}
       </button>
       <div className="filter-list">
diff --git a/app/client/src/components/editorComponents/JSResponseView.tsx b/app/client/src/components/editorComponents/JSResponseView.tsx
index 7758aaf978..cf7e6b09a7 100644
--- a/app/client/src/components/editorComponents/JSResponseView.tsx
+++ b/app/client/src/components/editorComponents/JSResponseView.tsx
@@ -214,7 +214,7 @@ function JSResponseView(props: Props) {
           </HelpSection>
           <ResponseTabWrapper className={errors.length ? "disable" : ""}>
             {sortedActionList && !sortedActionList?.length ? (
-              <NoResponseContainer>
+              <NoResponseContainer className="flex items-center">
                 {createMessage(EMPTY_JS_OBJECT)}
               </NoResponseContainer>
             ) : (
@@ -248,7 +248,7 @@ function JSResponseView(props: Props) {
                   ) : !responses.hasOwnProperty(selectActionId) ? (
                     <NoResponseContainer className="empty">
                       <Icon name="no-response" />
-                      <Text type={TextType.P1}>
+                      <Text className="flex items-center" type={TextType.P1}>
                         {EMPTY_RESPONSE_FIRST_HALF()}
                         <RunFunction className="response-run" />
                         {EMPTY_RESPONSE_LAST_HALF()}
diff --git a/app/client/src/pages/Applications/index.tsx b/app/client/src/pages/Applications/index.tsx
index b9c7a69fe2..30f18c83cf 100644
--- a/app/client/src/pages/Applications/index.tsx
+++ b/app/client/src/pages/Applications/index.tsx
@@ -796,20 +796,20 @@ function ApplicationsSection(props: any) {
                                 }
                                 underline
                               />
-                              <MenuItem
-                                cypressSelector="t--org-setting"
-                                icon="general"
-                                onSelect={() =>
-                                  getOnSelectAction(
-                                    DropdownOnSelectActions.REDIRECT,
-                                    {
-                                      path: `/org/${organization.id}/settings/general`,
-                                    },
-                                  )
-                                }
-                                text="Organization Settings"
-                              />
                             </div>
+                            <MenuItem
+                              cypressSelector="t--org-setting"
+                              icon="general"
+                              onSelect={() =>
+                                getOnSelectAction(
+                                  DropdownOnSelectActions.REDIRECT,
+                                  {
+                                    path: `/org/${organization.id}/settings/general`,
+                                  },
+                                )
+                              }
+                              text="Organization Settings"
+                            />
                             {enableImportExport && (
                               <MenuItem
                                 cypressSelector="t--org-import-app"
diff --git a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
index b1cbd7771a..d836b4fd41 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/DataSourceOption.tsx
@@ -29,7 +29,7 @@ const OptionWrapper = styled.div<{
   display: flex;
   align-items: center;
   user-select: none;
-  width: ${(props) => props.width};
+  width: 100%;
 
   &&& svg {
     rect {
diff --git a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
index a9139c2d5b..d9785886ae 100644
--- a/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
+++ b/app/client/src/pages/Editor/GeneratePage/components/GeneratePageForm/GeneratePageForm.tsx
@@ -608,14 +608,14 @@ function GeneratePageForm() {
     !selectedTable.value || !showSubmitButton || isSelectedTableEmpty;
 
   return (
-    <div>
+    <div className="space-y-4">
       <Wrapper>
         <DescWrapper>
           <Title>{GENERATE_PAGE_FORM_TITLE()}</Title>
         </DescWrapper>
       </Wrapper>
       <FormWrapper>
-        <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+        <SelectWrapper className="space-y-3" width={DROPDOWN_DIMENSION.WIDTH}>
           <Label>{createMessage(GEN_CRUD_DATASOURCE_DROPDOWN_LABEL)}</Label>
           <Dropdown
             cypressSelector="t--datasource-dropdown"
@@ -641,7 +641,7 @@ function GeneratePageForm() {
           />
         </SelectWrapper>
         {selectedDatasource.value ? (
-          <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+          <SelectWrapper className="space-y-3" width={DROPDOWN_DIMENSION.WIDTH}>
             <Label>
               Select {pluginField.TABLE} from{" "}
               <Bold>{selectedDatasource.label}</Bold>
@@ -673,7 +673,10 @@ function GeneratePageForm() {
         {!isGoogleSheetPlugin ? (
           <>
             {showSearchableColumn && (
-              <SelectWrapper width={DROPDOWN_DIMENSION.WIDTH}>
+              <SelectWrapper
+                className="space-y-3"
+                width={DROPDOWN_DIMENSION.WIDTH}
+              >
                 <Row>
                   Select a searchable {pluginField.COLUMN} from the
                   selected&nbsp;
@@ -712,12 +715,14 @@ function GeneratePageForm() {
                 />
               </SelectWrapper>
             )}
-            <GeneratePageSubmitBtn
-              disabled={submitButtonDisable}
-              isLoading={!!isGeneratingTemplatePage}
-              onSubmit={handleFormSubmit}
-              showSubmitButton={!!showSubmitButton}
-            />
+            <div className="mt-4">
+              <GeneratePageSubmitBtn
+                disabled={submitButtonDisable}
+                isLoading={!!isGeneratingTemplatePage}
+                onSubmit={handleFormSubmit}
+                showSubmitButton={!!showSubmitButton}
+              />
+            </div>
           </>
         ) : (
           <GoogleSheetForm
diff --git a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
index be5c24ebfe..dd63cad8a3 100644
--- a/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
+++ b/app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx
@@ -159,7 +159,7 @@ export function PanelPropertiesEditor(
     }
   };
   return (
-    <div className="relative flex flex-col w-full py-3 space-y-2">
+    <div className="relative flex flex-col w-full pt-3 overflow-y-auto">
       <PanelHeader
         closePanel={closePanel}
         isEditable={panelConfig.editableTitle}
@@ -167,7 +167,7 @@ export function PanelPropertiesEditor(
         title={panelProps[panelConfig.titlePropertyName]}
         updatePropertyTitle={updatePropertyTitle}
       />
-      <div className="px-3">
+      <div className="p-3 pb-24 overflow-y-scroll">
         {panelConfigs &&
           generatePropertyControl(panelConfigs as PropertyPaneConfig[], {
             id: widgetProperties.widgetId,
diff --git a/app/client/src/pages/common/CanvasSelectionArena.tsx b/app/client/src/pages/common/CanvasSelectionArena.tsx
index 4460d1b5ab..6693db9036 100644
--- a/app/client/src/pages/common/CanvasSelectionArena.tsx
+++ b/app/client/src/pages/common/CanvasSelectionArena.tsx
@@ -12,6 +12,7 @@ import { getAppMode } from "selectors/applicationSelectors";
 import {
   getCurrentApplicationLayout,
   getCurrentPageId,
+  previewModeSelector,
 } from "selectors/editorSelectors";
 import styled from "styled-components";
 import { getNearestParentCanvas } from "utils/generators";
@@ -68,6 +69,7 @@ export function CanvasSelectionArena({
     (parentWidget && parentWidget.detachFromLayout)
   );
   const appMode = useSelector(getAppMode);
+  const isPreviewMode = useSelector(previewModeSelector);
   const isDragging = useSelector(
     (state: AppState) => state.ui.widgetDragResize.isDragging,
   );
@@ -442,7 +444,8 @@ export function CanvasSelectionArena({
   ]);
 
   const shouldShow =
-    appMode === APP_MODE.EDIT && !(isDragging || isResizing || isCommentMode);
+    appMode === APP_MODE.EDIT &&
+    !(isDragging || isResizing || isCommentMode || isPreviewMode);
 
   return shouldShow ? (
     <StyledSelectionCanvas
diff --git a/app/client/src/pages/common/PageNotFound.tsx b/app/client/src/pages/common/PageNotFound.tsx
index b8b665a720..1ef010291a 100644
--- a/app/client/src/pages/common/PageNotFound.tsx
+++ b/app/client/src/pages/common/PageNotFound.tsx
@@ -34,13 +34,13 @@ function PageNotFound(props: Props) {
   const { flushErrorsAndRedirect } = props;
 
   return (
-    <Wrapper>
+    <Wrapper className="space-y-6">
       <img
         alt="Page Unavailable"
-        className="page-unavailable-img"
+        className="mx-auto page-unavailable-img"
         src={PageUnavailableImage}
       />
-      <div>
+      <div className="space-y-2">
         <p className="bold-text">{createMessage(PAGE_NOT_FOUND)}</p>
         <p>
           Either this page doesn&apos;t exist, or you don&apos;t have access to{" "}
diff --git a/app/client/src/widgets/IframeWidget/component/index.tsx b/app/client/src/widgets/IframeWidget/component/index.tsx
index c6b47338eb..f452c2d111 100644
--- a/app/client/src/widgets/IframeWidget/component/index.tsx
+++ b/app/client/src/widgets/IframeWidget/component/index.tsx
@@ -3,9 +3,11 @@ import styled from "styled-components";
 import { hexToRgba } from "widgets/WidgetUtils";
 
 import { ComponentProps } from "widgets/BaseComponent";
-import { AppState } from "reducers";
 import { useSelector } from "store";
-import { RenderMode, RenderModes } from "constants/WidgetConstants";
+import { RenderMode } from "constants/WidgetConstants";
+import { getWidgetPropsForPropertyPane } from "selectors/propertyPaneSelectors";
+import { getAppMode } from "selectors/applicationSelectors";
+import { APP_MODE } from "entities/App";
 
 interface IframeContainerProps {
   borderColor?: string;
@@ -64,7 +66,6 @@ function IframeComponent(props: IframeComponentProps) {
     borderWidth,
     onMessageReceived,
     onURLChanged,
-    renderMode,
     source,
     title,
     widgetId,
@@ -95,12 +96,8 @@ function IframeComponent(props: IframeComponentProps) {
     }
   }, [source]);
 
-  const isPropertyPaneVisible = useSelector(
-    (state: AppState) => state.ui.propertyPane.isVisible,
-  );
-  const selectedWidgetId = useSelector(
-    (state: AppState) => state.ui.propertyPane.widgetId,
-  );
+  const appMode = useSelector(getAppMode);
+  const selectedWidget = useSelector(getWidgetPropsForPropertyPane);
 
   return (
     <IframeContainer
@@ -108,10 +105,9 @@ function IframeComponent(props: IframeComponentProps) {
       borderOpacity={borderOpacity}
       borderWidth={borderWidth}
     >
-      {renderMode === RenderModes.CANVAS &&
-        !(isPropertyPaneVisible && widgetId === selectedWidgetId) && (
-          <OverlayDiv />
-        )}
+      {appMode === APP_MODE.EDIT && widgetId !== selectedWidget?.widgetId && (
+        <OverlayDiv />
+      )}
 
       {message ? message : <iframe src={source} title={title} />}
     </IframeContainer>