chore: Move Add button to top (#29863)

Moves the add pane to the top Fixes #29861  ## Summary by CodeRabbit - **Refactor** - Improved the layout and conditional rendering logic in the editor pane for enhanced user experience and interface clarity. - Streamlined button visibility and interaction across various sections of the IDE, ensuring a more intuitive workflow when adding new elements.
appsmithorg · Dec 27, 2023 · 168053b · 168053b
1 parent f266db2
commit 168053b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 48 deletions.
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS_Section.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS_Section.tsx
@@ -59,6 +59,18 @@ const JSSection = () => {
       flexDirection="column"
       overflow="hidden"
     >
+      {JSObjects && JSObjects.length > 0 && canCreateActions && (
+        <Flex flexDirection="column" padding="spaces-3">
+          <Button
+            kind={"secondary"}
+            onClick={addButtonClickHandler}
+            size={"sm"}
+            startIcon={"add-line"}
+          >
+            {createMessage(PAGES_PANE_TEXTS.js_add_button)}
+          </Button>
+        </Flex>
+      )}
       <FilesContextProvider
         canCreateActions={canCreateActions}
         editorId={applicationId}
@@ -102,18 +114,6 @@ const JSSection = () => {
           onClick={canCreateActions ? addButtonClickHandler : undefined}
         />
       )}
-      {JSObjects && JSObjects.length > 0 && canCreateActions && (
-        <Flex flexDirection="column" padding="spaces-3">
-          <Button
-            kind={"secondary"}
-            onClick={addButtonClickHandler}
-            size={"sm"}
-            startIcon={"add-line"}
-          >
-            {createMessage(PAGES_PANE_TEXTS.js_add_button)}
-          </Button>
-        </Flex>
-      )}
     </JSContainer>
   );
 };

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/ListQuery.tsx b/app/client/src/pages/Editor/IDE/EditorPane/ListQuery.tsx
@@ -40,14 +40,25 @@ const ListQuery = () => {
   }, [pageId]);
 
   return (
-    <Flex
-      flex="1"
-      flexDirection="column"
-      gap="spaces-3"
-      overflow="hidden"
-      padding="spaces-3"
-    >
-      <Flex flexDirection={"column"} gap="spaces-3" overflowY="auto">
+    <Flex flex="1" flexDirection="column" overflow="hidden">
+      {Object.keys(files).length > 0 && canCreateActions && (
+        <Flex flexDirection={"column"} padding="spaces-3">
+          <Button
+            kind={"secondary"}
+            onClick={addButtonClickHandler}
+            size={"sm"}
+            startIcon={"add-line"}
+          >
+            {createMessage(PAGES_PANE_TEXTS.query_add_button)}
+          </Button>
+        </Flex>
+      )}
+      <Flex
+        flexDirection={"column"}
+        gap="spaces-3"
+        overflowY="auto"
+        padding="spaces-3"
+      >
         {Object.keys(files).map((key) => {
           return (
             <Flex flexDirection={"column"} gap="spaces-2" key={key}>
@@ -85,19 +96,6 @@ const ListQuery = () => {
         })}
       </Flex>
 
-      {Object.keys(files).length > 0 && canCreateActions && (
-        <Flex flexDirection={"column"} paddingBottom="spaces-3">
-          <Button
-            kind={"secondary"}
-            onClick={addButtonClickHandler}
-            size={"sm"}
-            startIcon={"add-line"}
-          >
-            {createMessage(PAGES_PANE_TEXTS.query_add_button)}
-          </Button>
-        </Flex>
-      )}
-
       {Object.keys(files).length === 0 && (
         <EmptyState
           buttonText={createMessage(PAGES_PANE_TEXTS.query_add_button)}

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/ListWidgets.tsx b/app/client/src/pages/Editor/IDE/EditorPane/ListWidgets.tsx
@@ -46,6 +46,21 @@ const ListWidgets = () => {
 
   return (
     <Flex flexDirection="column" overflow="hidden">
+      {widgets &&
+        widgets.children &&
+        widgets.children.length > 0 &&
+        canManagePages && (
+          <Flex flexDirection="column" padding="spaces-3">
+            <Button
+              kind={"secondary"}
+              onClick={addButtonClickHandler}
+              size={"sm"}
+              startIcon={"add-line"}
+            >
+              {createMessage(PAGES_PANE_TEXTS.widget_add_button)}
+            </Button>
+          </Flex>
+        )}
       <Flex
         flex="1"
         flexDirection={"column"}
@@ -77,21 +92,6 @@ const ListWidgets = () => {
           onClick={canManagePages ? addButtonClickHandler : undefined}
         />
       )}
-      {widgets &&
-        widgets.children &&
-        widgets.children.length > 0 &&
-        canManagePages && (
-          <Flex flexDirection="column" padding="spaces-3">
-            <Button
-              kind={"secondary"}
-              onClick={addButtonClickHandler}
-              size={"sm"}
-              startIcon={"add-line"}
-            >
-              {createMessage(PAGES_PANE_TEXTS.widget_add_button)}
-            </Button>
-          </Flex>
-        )}
     </Flex>
   );
 };