From 0605501a0576027be7c359e74cd0067847a405a6 Mon Sep 17 00:00:00 2001
From: Ankita Kinger <ankita@appsmith.com>
Date: Wed, 25 Dec 2024 18:23:33 +0530
Subject: [PATCH] chore: Fixing the top padding for queries and JS empty state
 to match UI segment empty state (#38365)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

Fixing the top padding for queries and JS empty state to match UI
segment empty state

Fixes [#38364](https://github.com/appsmithorg/appsmith/issues/38364)

## Automation

/ok-to-test tags="@tag.IDE"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12492225163>
> Commit: 7be7180a179d794633cf11e824bbd33b2ca8839d
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12492225163&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.IDE`
> Spec:
> <hr>Wed, 25 Dec 2024 11:07:53 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced conditional rendering of the `BlankState` component to
indicate when there are no items to display.
- Added a `NoSearchResults` component for clearer feedback when searches
yield no results.
- **Bug Fixes**
- Removed redundant rendering of the `BlankState` component to
streamline the user interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx    | 4 ++--
 app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
index e068499e4b..824cc6cc8e 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/JS/List.tsx
@@ -61,6 +61,8 @@ const ListJSObjects = () => {
       px="spaces-3"
       py="spaces-3"
     >
+      {(!itemGroups || itemGroups.length === 0) && <BlankState />}
+
       {itemGroups && itemGroups.length > 0 ? (
         <SearchAndAdd
           onAdd={openAddJS}
@@ -119,8 +121,6 @@ const ListJSObjects = () => {
           ) : null}
         </Flex>
       </FilesContextProvider>
-
-      {(!itemGroups || itemGroups.length === 0) && <BlankState />}
     </JSContainer>
   );
 };
diff --git a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
index 6c169fabb6..d5f66c9e4d 100644
--- a/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
+++ b/app/client/src/pages/Editor/IDE/EditorPane/Query/List.tsx
@@ -52,6 +52,8 @@ const ListQuery = () => {
       px="spaces-3"
       py="spaces-3"
     >
+      {Object.keys(itemGroups).length === 0 && <BlankState />}
+
       {itemGroups.length > 0 ? (
         <SearchAndAdd
           onAdd={openAddQuery}
@@ -102,8 +104,6 @@ const ListQuery = () => {
           />
         ) : null}
       </Flex>
-
-      {Object.keys(itemGroups).length === 0 && <BlankState />}
     </Flex>
   );
 };