fix the security select form dropdown in DataContract (#23723)

* Minor: fix the security select form dropdown in DataContract

* fix the security policy add button not enabled even if there is no policies

* fix the policies label being visible on ui, even though data is not present and added playwright test around it

* fix the unit test

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/DataContracts.spec.ts

@@ -2107,5 +2107,44 @@ test.describe('Data Contracts', () => {
         );
       }
     );
+
+    await test.step('Validate after removing security policies', async () => {
+      await page.getByRole('tab', { name: 'Security' }).click();
+
+      await page.getByTestId('cancel-policy-button').click();
+      await page.getByTestId('delete-policy-0').click();
+
+      const saveContractResponse = page.waitForResponse(
+        '/api/v1/dataContracts/*'
+      );
+      await page.getByTestId('save-contract-btn').click();
+      await saveContractResponse;
+
+      await page.waitForLoadState('networkidle');
+      await page.waitForSelector('[data-testid="loader"]', {
+        state: 'detached',
+      });
+
+      await expect(
+        page.getByTestId('contract-security-policy-container')
+      ).not.toBeVisible();
+
+      await page.getByTestId('manage-contract-actions').click();
+
+      await page.waitForSelector('.contract-action-dropdown', {
+        state: 'visible',
+      });
+
+      await page.getByTestId('contract-edit-button').click();
+
+      await page.getByRole('tab', { name: 'Security' }).click();
+
+      await expect(page.getByTestId('add-policy-button')).not.toBeDisabled();
+
+      await page.getByTestId('add-policy-button').click();
+
+      await expect(page.getByTestId('access-policy-input-0')).toBeVisible();
+      await expect(page.getByTestId('columnName-input-0-0')).toBeVisible();
+    });
   });
 });

openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractDetailTab/contract-detail.less

@@ -281,6 +281,7 @@
 
       &.rule-icon-default {
         font-size: 22px;
+        color: @grey-600;
       }
     }
 

openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractSecurity/ContractSecurityCard.component.tsx

@@ -133,13 +133,15 @@ const ContractSecurityCard: React.FC<{
         </Card>
       </Col>
 
-      <Col span={24}>
+      {!isEmpty(security?.policies) && (
+        <Col data-testid="contract-security-policy-container" span={24}>
           <Typography.Text className="contract-security-policy-label">
             {t('label.policy-plural')}
           </Typography.Text>
 
           {renderSecurityPolicies}
         </Col>
+      )}
     </Row>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractSecurity/ContractSecurityCard.test.tsx

@@ -112,7 +112,7 @@ describe('ContractSecurityCard', () => {
     expect(
       screen.getByTestId('contract-security-classification')
     ).toBeInTheDocument();
-    expect(screen.getByText('label.policy-plural')).toBeInTheDocument();
+    expect(screen.queryByTestId('label.policy-plural')).not.toBeInTheDocument();
     // Should show NO_DATA_PLACEHOLDER when security is undefined
     expect(screen.getAllByText(NO_DATA_PLACEHOLDER)).toHaveLength(1);
   });

openmetadata-ui/src/main/resources/ui/src/components/DataContract/ContractSecurityFormTab/ContractSecurityFormTab.tsx

@@ -125,6 +125,10 @@ export const ContractSecurityFormTab: React.FC<{
   useEffect(() => {
     if (!isEmpty(initialValues?.security)) {
       form.setFieldsValue(initialValues?.security);
+
+      if (!isEmpty(initialValues?.security?.policies)) {
+        setEditingKey(0);
+      }
     } else {
       form.setFieldsValue({
         dataClassification: '',
@@ -141,8 +145,9 @@ export const ContractSecurityFormTab: React.FC<{
           },
         ],
       });
-    }
+
       setEditingKey(0);
+    }
   }, [initialValues?.security]);
 
   return (
@@ -299,6 +304,7 @@ export const ContractSecurityFormTab: React.FC<{
                                           data-testid={`identities-input-${policyIndex}`}
                                           id={`identities-input-${policyIndex}`}
                                           mode="tags"
+                                          open={false}
                                           placeholder={t(
                                             'label.please-enter-value',
                                             {
@@ -402,6 +408,7 @@ export const ContractSecurityFormTab: React.FC<{
                                                           data-testid={`values-${policyIndex}-${rowFilterIndex}`}
                                                           id={`values-${policyIndex}-${rowFilterIndex}`}
                                                           mode="tags"
+                                                          open={false}
                                                           placeholder={t(
                                                             'label.please-enter-value',
                                                             {
@@ -508,6 +515,7 @@ export const ContractSecurityFormTab: React.FC<{
                                                   data-testid={`values-${policyIndex}-${rowFilterIndex}`}
                                                   id={`values-${policyIndex}-${rowFilterIndex}`}
                                                   mode="tags"
+                                                  open={false}
                                                   placeholder={t(
                                                     'label.please-enter-value',
                                                     {