From 056fb086bf8c3f7c15d107c8923f1b78b784d148 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Tue, 13 Jun 2023 18:30:51 +0530
Subject: [PATCH] fix: Property pane dropdown alignment when icon is present
 (#24289)

## Description

This PR fixes the alignment issue of property pane dropdown when the
option have text and icon at the same time.

#### PR fixes following issue(s)
Fixes # (issue number)
https://github.com/appsmithorg/appsmith/issues/23859

#### Media

https://github.com/appsmithorg/appsmith/assets/87797149/53f3d9ac-75b2-4a8b-b2e2-68fc8fbb65cb



#### Type of change
- Bug fix (non-breaking change which fixes an issue)

## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [ ] Manual
- [ ] Jest
- [ ] Cypress
>
>
#### Test Plan
> Add Testsmith test cases links that relate to this PR
>
>
#### Issues raised during DP testing
> Link issues raised during DP testing for better visiblity and tracking
(copy link from comments dropped on this PR)
>
>
>
## Checklist:
#### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Test-plan-implementation#speedbreaker-features-to-consider-for-every-change)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans/_edit#areas-of-interest)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed
---
 .../Listv2_dataIdentifierProperty_spec.js     |  2 +-
 .../propertyControls/DropDownControl.tsx      | 52 ++++++++++---------
 2 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
index baa74e1c0a..00e63fe6ef 100644
--- a/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
+++ b/app/client/cypress/e2e/Regression/ClientSide/Widgets/ListV2/Listv2_dataIdentifierProperty_spec.js
@@ -71,7 +71,7 @@ describe("List v2 - Data Identifier property", () => {
     cy.wait(250);
 
     // check if all the keys are present
-    cy.get(".rc-select-item-option-content > span")
+    cy.get(".rc-select-item-option-content > div > span")
       .should("have.length", 3)
       .then(($el) => {
         // we get a list of jQuery elements
diff --git a/app/client/src/components/propertyControls/DropDownControl.tsx b/app/client/src/components/propertyControls/DropDownControl.tsx
index e64117eedd..701bf82040 100644
--- a/app/client/src/components/propertyControls/DropDownControl.tsx
+++ b/app/client/src/components/propertyControls/DropDownControl.tsx
@@ -117,34 +117,36 @@ class DropDownControl extends BaseControl<DropDownControlProps> {
               label={option.label}
               value={option.value}
             >
-              {/* Show Flag if present */}
-              {option.leftElement && (
-                <FlagWrapper>{option.leftElement}</FlagWrapper>
-              )}
+              <div className="flex flex-row w-full">
+                {/* Show Flag if present */}
+                {option.leftElement && (
+                  <FlagWrapper>{option.leftElement}</FlagWrapper>
+                )}
 
-              {/* Show icon if present */}
-              {option.icon && (
-                <Icon className="mr-1" name={option.icon} size="md" />
-              )}
+                {/* Show icon if present */}
+                {option.icon && (
+                  <Icon className="mr-1" name={option.icon} size="md" />
+                )}
 
-              {option.subText ? (
-                this.props.hideSubText ? (
-                  // Show subText below the main text eg - DatePicker control
-                  <div className="w-full flex flex-col">
-                    <Text kind="action-m">{option.label}</Text>
-                    <Text kind="action-s">{option.subText}</Text>
-                  </div>
+                {option.subText ? (
+                  this.props.hideSubText ? (
+                    // Show subText below the main text eg - DatePicker control
+                    <div className="w-full flex flex-col">
+                      <Text kind="action-m">{option.label}</Text>
+                      <Text kind="action-s">{option.subText}</Text>
+                    </div>
+                  ) : (
+                    // Show subText to the right side eg - Label fontsize control
+                    <div className="w-full flex justify-between items-end">
+                      <Text kind="action-m">{option.label}</Text>
+                      <Text kind="action-s">{option.subText}</Text>
+                    </div>
+                  )
                 ) : (
-                  // Show subText to the right side eg - Label fontsize control
-                  <div className="w-full flex justify-between items-end">
-                    <Text kind="action-m">{option.label}</Text>
-                    <Text kind="action-s">{option.subText}</Text>
-                  </div>
-                )
-              ) : (
-                // Only show the label eg - Auto height control
-                <Text kind="action-m">{option.label}</Text>
-              )}
+                  // Only show the label eg - Auto height control
+                  <Text kind="action-m">{option.label}</Text>
+                )}
+              </div>
             </Option>
           ))}
         </Select>